<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本站概况</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="icon" type="image/ico" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.css}" rel="stylesheet" />
    <link th:href="@{/static/css/custom.css}" rel="stylesheet" />
    <link th:href="@{/static/css/style.css}" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/layui/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/static/css/animate.min.css}" />
</head>

<body class="gray-bg">
<div>

    <div class="row" style="width: 95%; margin: 0 auto;margin-top: 50px;" th:if=" ${levels} gt '1'">
        <h3 class="font-bold">开发者公告</h3>
    </div>
    <div class="row " style="width: 95%; margin: 0 auto;margin-top: 50px;" th:if=" ${levels} gt '1'">
        <blockquote class="animated fadeInRight">
            <p class="bg-primary" id="notice" style="border-radius: 5px;padding: 20px;line-height: 27px;">暂无重要公告通知。</p>
        </blockquote>
    </div>



    <div class="row"  style="width: 95%; margin: 0 auto;margin-top: 50px;" th:if=" ${levels} gt '1'">
        <h3 class="font-bold">系统概况</h3>
    </div>

    <div class="row" style="width: 95%; margin: 0 auto;margin-top: 50px;" th:if=" ${levels} eq '1'">
        <h2 class="font-bold"> </h2>
    </div>
    <div class="wrapper wrapper-content"  th:if=" ${levels} gt '1'">
        <div class="row" style="width: 95%; margin: 0 auto;">
            <div class="col-sm-3 Mouseevent animated fadeInLeft">
                <div class="widget style1 navy-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="glyphicon glyphicon-picture" style="font-size: 4.0em;"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 本站累计图片总数 </span>
                            <h2 class="font-bold" id="counts">0</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 Mouseevent animated fadeInLeft">
                <div class="widget style1 navy-bg" style="background-color: #4ebd87;">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="glyphicon glyphicon-user fa-5x" style="font-size: 3.6em;"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 用户总数 </span>
                            <h2 class="font-bold" id="getusertotal">0</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 Mouseevent animated fadeInLeft">
                <div class="widget style1 yellow-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="glyphicon glyphicon-remove-sign fa-5x" style="font-size: 3.6em;"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span>非法图片拦截 </span>
                            <h2 class="font-bold" id="imgreviewcount">0</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 Mouseevent animated fadeInLeft">
                <div class="widget style1 lazur-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="glyphicon glyphicon-tasks fa-5x" style="font-size: 4.0em;"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span>游客使用量(M)</span>
                            <h2 class="font-bold" id="source">未知</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="row"  style="margin-top: 50px;width: 95%; margin: 0 auto;">
                <h3 class="font-bold">我的信息</h3>
            </div>
        <div class="row"  style="width: 95%; margin: 0 auto;">
            <div class="col-sm-6 Mouseevent animated fadeInRight">
                <div class="widget navy-bg no-padding">
                    <div class="p-m">
                        <h2 class="m-xs">容量使用&nbsp;<a class="layui-btn layui-btn-sm  layui-btn-danger" style="height: 23px;line-height: 24px;" onclick="kuorong()" title="获取更大空间">扩&nbsp;容</a></h2>
                        <h3 class="font-bold no-margins" id="ly">
                            <div id="leftstate" style=" color:#f2f2f2;font-size:10px;height: 10px;position:absolute;bottom:55px; width: 70%;z-index: 1;">
                                <div class="layui-progress layui-progress-big"  lay-filter="datasize"  style="height: 12px;position:absolute;bottom:20px; width: 100%;margin-left: 3%;" >
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="100%" style="height: 12px;width: 160px;"></div>
                                </div>
                                <h3 STYLE="text-align: center;" id="ncqk">当前空间：1024M/1024M</h3>
                            </div>
                        </h3>
                        <h3 class="m-xs">
                            <br />
<!--                            <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" onclick="kuorong()" title="获取更大空间">&nbsp;</a>-->
                        </h3>
                    </div>
                    <div class="flot-chart">
                        <div class="flot-chart-content" id="flot-chart1"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 Mouseevent animated fadeInRight">
                <div class="widget lazur-bg no-padding">
                    <div class="p-m">
                        <h1 class="m-xs" id="usercount">0</h1>
                        <h3 class="font-bold no-margins">
                            我的图片总数
                        </h3>
                        <small></small>
                    </div>
                    <div class="flot-chart">
                        <div class="flot-chart-content" id="flot-chart2"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget yellw-bg no-padding">
                        <table class="table" >
                                <tbody>
                                    <tr class="animated bounceInUp delay-0.5s">
                                        <td>
                                            <button type="button" class="btn btn-danger m-r-sm">系统名称：</button>
                                            <span th:text="${sysetmname}" style="font-weight: bold;"></span>
                                        </td>
                                    </tr>
                                    <tr class="animated bounceInUp delay-1s">
                                            <td>
                                                <button type="button" class="btn btn-info m-r-sm">系统架构：</button>
                                                <span th:text="${isarch}" style="font-weight: bold;"></span>
                                            </td>
                                    </tr>
                                    <tr class="animated bounceInUp delay-2s">
                                            <td>
                                                <button type="button" class="btn btn-info m-r-sm">JDK版本：</button>
                                                <span th:text="${jdk}" style="font-weight: bold;"></span>
                                            </td>
                                    </tr>
                                    <tr class="animated bounceInUp delay-3s">
                                        <td>
                                            <button type="button" class="btn btn-info m-r-sm">开发语言：</button>
                                            <span  style="font-weight: bold;">JAVA开发</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                </div>
            </div>
        </div>
        <div class="row">
        </div>
</div>
    <!-- 全局js -->
    <script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/jquery-ui-1.10.4.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
    <!-- 自定义js -->
    <script th:src="@{/static/js/content.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/jquery.flot.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layui/layui.js}"></script>
    <script>
        var usermemory = Number([[${usermemory}]]);
        var memory = Number([[${memory}]]);
        var ret = (usermemory/memory)*100;
        layui.use(['form', 'layedit', 'laydate','element'], function () {
            var form = layui.form
                , layer = layui.layer
            var element = layui.element;
            if(memory==-1){
                element.progress('datasize', '100%');
                $('#ncqk').text('当前空间：'+usermemory+'M/无限制');
            }else{
                element.progress('datasize', ret+'0%');
                $('#ncqk').text('当前空间：'+usermemory+'M/'+memory+'M');
            }
        });
        $(function () {
            //获取本站概况
            $.ajax({
                type: "POST",
                url: "/admin/getwebconfig",
                dataType: "json",
                success: function (data) {
                    $("#counts").text(data.counts);
                    $("#getusertotal").text(data.getusertotal);
                    $("#imgreviewcount").text(data.imgreviewcount);
                    $("#usercount").text(data.usercount);
                    var str = "";
                    if (data.VisitorUpload == 1) {
                        if(data.VisitorMemory==-1){
                            str ='无限制';
                        }else{
                            str = data.UsedSize+"/"+data.VisitorMemory;
                        }
                    } else{
                        str = "禁用";
                    }
                    $("#source").text(str);
                }
            });

            $.ajax({
                type: "GET",
                url: "/getNotice",
                dataType: "json",
                success: function (data) {
                    $('#notice').text(data.data);
                }
            });

        })
        $(document).ready(function () {
            var d1 = [ [1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295] ];
            var d2 = [ [1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000] ];

            var data1 = [
                {
                    label: "Data 1",
                    data: d1,
                    color: '#17a084'
                },
                {
                    label: "Data 2",
                    data: d2,
                    color: '#127e68'
                }
            ];
            $.plot($("#flot-chart1"), data1, {
                xaxis: {
                    tickDecimals: 0
                },
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: {
                            colors: [ {
                                opacity: 1
                            }, {
                                opacity: 1
                            } ]
                        },
                    },
                    points: {
                        width: 0.1,
                        show: false
                    },
                },
                grid: {
                    show: false,
                    borderWidth: 0
                },
                legend: {
                    show: false,
                }
            });

            var data2 = [
                {
                    label: "Data 1",
                    data: d1,
                    color: '#19a0a1'
                }
            ];
            $.plot($("#flot-chart2"), data2, {
                xaxis: {
                    tickDecimals: 0
                },
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: {
                            colors: [ {
                                opacity: 1
                            }, {
                                opacity: 1
                            } ]
                        },
                    },
                    points: {
                        width: 0.1,
                        show: false
                    },
                },
                grid: {
                    show: false,
                    borderWidth: 0
                },
                legend: {
                    show: false,
                }
            });

            var data3 = [
                 {
                    label: "Data 1",
                    data: d1,
                    color: '#fbbe7b'
                },
                {
                    label: "Data 2",
                    data: d2,
                    color: '#f8ac59'
                }
            ];
            $.plot($("#flot-chart3"), data3, {
                xaxis: {
                    tickDecimals: 0
                },
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: {
                            colors: [ {
                                opacity: 1
                            }, {
                                opacity: 1
                            } ]
                        },
                    },
                    points: {
                        width: 0.1,
                        show: false
                    },
                },
                grid: {
                    show: false,
                    borderWidth: 0
                },
                legend: {
                    show: false,
                }
            });

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $(".todo-list").sortable({
                placeholder: "sort-highlight",
                handle: ".handle",
                forcePlaceholderSize: true,
                zIndex: 999999
            }).disableSelection();;

            var mapData = {
                "US": 498,
                "SA": 200,
                "CA": 1300,
                "DE": 220,
                "FR": 540,
                "CN": 120,
                "AU": 760,
                "BR": 550,
                "IN": 200,
                "GB": 120,
                "RU": 2000
            };

            $('#world-map').vectorMap({
                map: 'world_mill_en',
                backgroundColor: "transparent",
                regionStyle: {
                    initial: {
                        fill: '#e4e4e4',
                        "fill-opacity": 1,
                        stroke: 'none',
                        "stroke-width": 0,
                        "stroke-opacity": 0
                    }
                },
                series: {
                    regions: [ {
                        values: mapData,
                        scale: ["#1ab394", "#22d6b1"],
                        normalizeFunction: 'polynomial'
                    } ]
                },
            });
        });
        function times() {
            now = new Date(), hour = now.getHours()
            if (hour < 6) {
                return ("凌晨好！")
            } else if (hour < 9) {
                return ("早上好！")
            } else if (hour < 12) {
                return ("上午好！")
            } else if (hour < 14) {
                return ("中午好！")
            } else if (hour < 17) {
                return ("下午好！")
            } else if (hour < 19) {
                return ("傍晚好！")
            } else if (hour < 22) {
                return ("晚上好！")
            } else {
                return ("夜里好！")
            }
        }
        //扩容
        function kuorong() {
            layer.open({
                type: 1,
                title:'空间扩容',
                shadeClose: true,
                //skin: 'layui-layer-rim',
                area: ['450px', '240px'],
                content: '<div style="width: 360px;"><br /><br /><div class="layui-form-item">\n' +
                    '  <label class="layui-form-label"style="width: 90px;">扩容码：</label>\n' +
                    '  <div class="layui-input-block">\n' +
                    '  <input type="text" name="title" id="krm"  required lay-verify="required" placeholder="请输入你的扩容码" autocomplete="off" class="layui-input">  ' +
                    '<span style="color: #DAA5A6; font-size: 12px;">扩容码为一次性，只能扩容一次，切勿泄露。</span><br/><br/><button type="button" onclick="kr()" style="float: right;" class="layui-btn layui-btn-radius layui-btn-normal" onclick="">激 活</button>'+
                    '  </div>\n' +
                    '</div></div>'
            });
        }
        function kr() {
            var krm = $('#krm').val();
            $.ajax({
                type: "POST",
                url: "/admin/kuorong",
                dataType: "json",
                data:{codestring:krm},
                success: function (data) {
                    if(data.ret>0){
                        layer.msg('扩容成功，当前总空间：'+data.sizes+'M', {icon: 1});
                        setTimeout(function () { window.location.reload(); }, 2000);
                    }else if(data.ret ==-1){
                        layer.msg('很抱歉，该扩容码不存在', {icon: 2});
                    }else{
                        layer.msg('很网络超时，请刷新页面后重新尝试', {icon: 2});
                    }
                }
            });
        }

        $(".Mouseevent").each(function(index){
            $(this).mouseenter(function(obj) {
                $(this).removeClass('fadeInLeft');
                $(this).addClass('pulse');
            });
            $(this).mouseleave(function(obj) {
                $(this).removeClass('pulse');
            });
        });

    </script>

    
    

</body>

</html>
